<template>
  <div class="ele-body">
    <el-row :gutter="20">
      <el-col :span="assetType === 'web'|| assetType === 'os' ? 16 : 24">
        <el-card
          shadow="never"
          body-style="padding: 20px;"
          style="height: 270px"
        >
          <div style="height: 20px; margin-top: 5px">
            <el-divider content-position="left">
              <h3>{{ assetInfo.name }}</h3>
            </el-divider>
          </div>
          <div style="margin: 10px 25px">
            <ul class="type-info">
              <li>
                <p>资产标识:</p>
                <p>{{ assetInfo.key }}</p>
              </li>
              <li>
                <p>资产类型:</p>
                <p>{{ assetInfo.type.name }}</p>
              </li>
              <li>
                <p>负责人:</p>
                <p>{{ assetInfo.manage.name }}</p>
              </li>
              <li>
                <p>漏洞数量:</p>
                <p>{{ assetInfo.vuln_count }}</p>
              </li>
              <li>
                <p>创建时间:</p>
                <p>{{ assetInfo.add_time | moment }}</p>
              </li>
              <li>
                <p>更新时间:</p>
                <p>{{ assetInfo.update_time | moment }}</p>
              </li>
            </ul>
            <p>资产描述:</p>
            <p style="text-indent: 2em">{{ assetInfo.description }}</p>
          </div>
        </el-card>
      </el-col>
      <el-col v-if="assetType === 'web'|| assetType === 'os'" :span="8">
        <el-card
          shadow="never"
          body-style="padding: 20px;"
          class="type-info"
          style="height: 270px"
        >
          <ul v-if="assetType === 'web'">
            <li v-for="(item, key, index) in typeInfo" :key="'type' + key">
              <p class="type-name">{{ typeItem[index] }}</p>
              <p v-if="key !== 'update_time'">{{ item | getName }}</p>
              <p v-else>{{ item | moment }}</p>
            </li>
          </ul>
          <ul v-if="assetType === 'os'">
            <li v-for="(item, key, index) in typeInfo" :key="'type' + key">
              <p class="type-name">{{ typeItem[index] }}</p>
              <p v-if="key !== 'update_time'">{{ item }}</p>
              <p v-else>{{ item | moment }}</p>
            </li>
          </ul>
          <span class="type-edit" @click="editTypeInfo">编辑>></span>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never" style="margin-top: 20px">
      <div class="ele-table-tool">
        <div class="ele-table-tool-title">漏洞列表</div>
        <!-- <div class="ele-table-tool-right">
          <el-button
            type="primary"
            icon="el-icon-plus"
            class="ele-btn-icon"
            @click="showEdit = true"
          >添加
          </el-button>
        </div> -->
      </div>

      <!-- 数据表格 -->
      <ele-data-table
        ref="table"
        :config="vulnTable"
        highlight-current-row
        height="calc(100vh - 530px)"
      >
        <template slot-scope="">
          <el-table-column
            prop="name"
            label="漏洞名称"
            show-overflow-tooltip
            min-width="110"
          />
          <el-table-column
            prop="type"
            label="漏洞类型"
            show-overflow-tooltip
            min-width="110"
          >
            <template slot-scope="{ row }">{{ row.type.name }}</template>
          </el-table-column>
          <el-table-column
            prop="source"
            label="漏洞来源"
            show-overflow-tooltip
            min-width="110"
          >
            <template slot-scope="{ row }">{{ row.source.name }}</template>
          </el-table-column>
          <el-table-column
            prop="level"
            label="漏洞等级"
            sortable
            min-width="110"
          >
            <template slot-scope="{ row }">
              <ele-dot
                :type="['', 'success', 'danger', 'info'][row.level.id]"
                :text="row.level.name"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="update_time"
            label="更新时间"
            sortable
            show-overflow-tooltip
            min-width="135"
          >
            <template slot-scope="{ row }">{{
              row.update_time | moment
            }}</template>
          </el-table-column>
          <el-table-column
            prop="create_time"
            label="创建时间"
            sortable
            show-overflow-tooltip
            min-width="135"
          >
            <template slot-scope="{ row }">{{
              row.create_time | moment
            }}</template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            min-width="160"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-link
                icon="el-icon-edit"
                type="primary"
                :underline="false"
                @click="edit(row)"
              >编辑</el-link>
              <el-link
                icon="el-icon-delete"
                type="primary"
                :underline="false"
                @click="$message('click')"
              >删除
              </el-link>
            </template>
          </el-table-column>
        </template>
      </ele-data-table>
    </el-card>
    <el-dialog
      title="更新资产类型信息"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <type-model
        ref="typeModel"
        :item-type="assetType"
        :type-info="typeInfo"
        :asset-id="assetId"
        @changeModel="changeModel"
        @updateSucceed="updateSucceed"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeModel">取 消</el-button>
        <el-button type="primary" @click="updateAssetType">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import typeItem from './typeItem'
import { getAssetDetial } from '@/api/asset'
import typeModel from '../components/typeModel'
export default {
  name: 'AssetDetial',
  components: {
    typeModel
  },
  filters: {
    moment: function(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    },
    getName: function(value) {
      if (typeof value === 'object') {
        return value.name
      } else {
        return value
      }
    }
  },
  data() {
    return {
      assetId: 0,
      assetInfo: {
        type: {},
        manage: {}
      },
      assetType: '',
      typeInfo: {},
      typeItem: [],
      vulnTable: { // 表格配置
        url: '',
        where: {}
      },
      assetExInfo: '',
      showEdit: false,
      dialogVisible: false
    }
  },
  mounted() {
    this.assetId = this.$route.params.id
    this._getAssetDetial()
    this.reloadVulnTabel()
  },
  methods: {
    _getAssetDetial() {
      getAssetDetial(this.assetId).then(res => {
        const resp = res.data.data
        this.assetInfo = resp.info
        if (resp.web) {
          this.assetType = 'web'
          this.typeInfo.key = resp.web.key
          this.typeInfo.language = resp.web.language
          this.typeInfo.middleware = resp.web.middleware
          this.typeInfo.middleware_version = resp.web.middleware_version
          this.typeInfo.web_framwork = resp.web.web_framwork
          this.typeInfo.web_framwork_version = resp.web.web_framwork_version
          this.typeInfo.update_time = resp.web.update_time
          this.typeItem = typeItem.web
          this.assetExInfo = '插件列表'
        } else if (resp.os) {
          this.assetType = 'os'
          this.typeInfo.key = resp.os.key
          this.typeInfo.hostname = resp.os.hostname
          this.typeInfo.os = resp.os.os
          this.typeItem = typeItem.os
          this.assetExInfo = '端口列表'
        }
      })
    },
    reloadVulnTabel() {
      this.vulnTable.url = `/asset/vuln/list/${this.assetId}/`
      this.$refs.table.reload()
    },
    editTypeInfo() {
      this.dialogVisible = true
    },
    changeModel(value) {
      this.dialogVisible = value
    },
    closeModel() {
      this.dialogVisible = false
    },
    updateAssetType() {
      this.$refs.typeModel.updateAssetType()
    },
    updateSucceed() {
      this._getAssetDetial()
    }
  }
}
</script>

<style lang="scss" scoped>
li {
  list-style: none;
}
.type-info {
  li {
    display: block;
    height: 25px;
    p {
      display: inline-block;
    }
  }
}
.type-name {
  width: 100px;
}
.type-edit {
  color: #57a2ff;
  cursor: pointer;
  float: right;
  //     right: 15px;
  //   bottom: 15px;
}
.tab-content {
  padding: 10px;
}
</style>
